﻿@model HomeModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>@Model.User.BlogName</title>
    @Html.Partial("SharedHead")
    <link href="@Url.Content("~/Content/Home/Home.css")" rel="stylesheet" type="text/css" />

        <script type="text/javascript">
            head.js(
        "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js",
        "@Url.Content("~/Content/Home/jquery.quickflip.source.js")",
        "@Url.Content("~/Content/Home/Home.js")",
        "@Url.Content("~/Content/Sidebar/Sidebar.dynamic.js")",
        function () {
            $.homeTiles();
            $.sideBar();

            hideOrShowTitle();
        });

            function hideOrShowTitle() {
                var header = $(".websiteHeader");
                if ($(window).height() < 680 && header.css('display') !== 'none') {
                    header.hide();
                }
                else if ($(window).height() >= 680 && header.css('display') == 'none') {
                    header.show();
                }
            }

            function ImgError(source) {
                source.src = "TwitPic.png";
                source.onerror = "";
                return true;
            }
    </script>
</head>
<body style="background: url(@Url.Content("~/Content/Home/HomePageBackground.png")) no-repeat center center fixed; background-color: #0E6D38;">
<div class="mainContent" style="padding-right: 200;">
        <div class="websiteHeader">
            <h1 class="websiteTitle">@Model.User.BlogName</h1>
            <img class="headshot" src="@Url.Content("~/Content/headshot.png")" alt="Justin Angel picture" />
            <h2 class="nameTitle"><span id="firstName">Justin</span><br /><span id="surName">Angel</span></h2>
        </div>
        <div class="tilesContainer">

            <!-- Top Article - 600pixel --> 
            <a href="/@Model.Article0.Permlink" style="position: absolute; top: 0px; left: 0px;">
                <div class="Tile_TopArticle" >
                    <div class="front">
                            <h3>@Model.Article0.Title</h3>
                            <span class="counter">
                                <span>@Model.Article0.HomePageCount</span>
                                <img src="@Url.Content("~/Content/Home/TwitterCounter.png")" />
                            </span>
                    </div>
                    <div class="GeneircImageBackTile">
                        <img src="@Model.Article0.HomePageImage" />                        
                    </div>
                </div>
            </a>

            <!-- Top 2nd Article - 400pixel --> 
            <a href="@Model.Article1.Permlink" style="position: absolute; top: 280px; left: 420px;">
                <div class="Tile_Top2ndArticle" >
                    <div class="front">
                            <h3>@Model.Article1.Title</h3>
/a                            <span class="counter">
                                <span>@Model.Article1.HomePageCount</span>
                                <img src="@Url.Content("~/Content/Home/TwitterCounter.png")" />
                            </span>
                    </div>
                    <div class="GeneircImageBackTile">
                        <img src="@Model.Article1.HomePageImage" />
                    </div>
                </div>
            </a>

            <!-- Top 3rd Article - 200pixel --> 
            <a href="@Model.Article2.Permlink" style="position: absolute; top: 420px; left: 210px;">
                <div class="Tile_Top3rdOr4thArticle" >
                    <div class="front">
                            <h3>@Model.Article2.Title</h3>
                            <span class="counter">
                                <span>@Model.Article2.HomePageCount</span>
                                <img src="@Url.Content("~/Content/Home/TwitterCounter.png")" />
                            </span>
                    </div>
                    <div class="GeneircImageBackTile">
                        <img src="@Model.Article2.HomePageImage" />
                    </div>
                </div>
            </a>

            <!-- Top 4th Article - 200pixel --> 
            <a href="@Model.Article3.Permlink" style="position: absolute; top: 280px; left: 0px;">
                <div class="Tile_Top3rdOr4thArticle" >
                    <div class="front">
                            <h3>@Model.Article3.Title</h3>
                            <span class="counter">
                                <span>@Model.Article3.HomePageCount</span>
                                <img src="@Url.Content("~/Content/Home/TwitterCounter.png")" />
                            </span>
                    </div>
                    <div class="GeneircImageBackTile">
                        <img src="@Model.Article3.HomePageImage" />
                    </div>
                </div>
            </a>

            <!-- 1st twitpic - 200pixel long --> 
            <a href="http://twitpic.com/@Model.TwitPicGuid0" style="position: absolute; top: 0px; left: 590px;">
                <div class="Tile_1stTwitPic" >
                    <div class="front">
                            <h3>@Model.TwitPicText0</h3>
                    </div>
                    <div class="GeneircImageBackTile">
                        <img src="http://twitpic.com/show/large/@Model.TwitPicGuid0" />
                    </div>
                </div>
            </a>

            <!-- 2nd twitpic - 200pixel long --> 
            <a href="http://twitpic.com/@Model.TwitPicGuid1" style="position: absolute; top: 150px; left: 590px;">
                <div class="Tile_2ndTwitPic" >
                    <div class="front">
                            <h3>@Model.TwitPicText1</h3>
                    </div>
                    <div class="GeneircImageBackTile">
                        <img src="http://twitpic.com/show/large/@Model.TwitPicGuid1" />
                    </div>
                </div>
            </a>

            <!-- combined twitpic - 200pixelx 130pixel --> 
            <a href="http://twitter.com/#!/JustinAngel/media/grid" style="position: absolute; top: 460px; left: 0px;">
                <div class="Tile_QuadTwitPic" >
                    <div class="front">
                        <img src="http://twitpic.com/show/mini/@Model.TwitPicGuid2" style="float: left" onerror="ImgError(this);" />
                        <img src="http://twitpic.com/show/mini/@Model.TwitPicGuid3" style="float: right" onerror="ImgError(this);" />
                        <img src="http://twitpic.com/show/mini/@Model.TwitPicGuid4" style="float: left" onerror="ImgError(this);" />
                        <img src="http://twitpic.com/show/mini/@Model.TwitPicGuid5" style="float: right" onerror="ImgError(this);" />
                    </div>
                    <div class="back">
                        <img src="http://twitpic.com/show/mini/@Model.TwitPicGuid6" style="float: left" onerror="ImgError(this);" />
                        <img src="http://twitpic.com/show/mini/@Model.TwitPicGuid7" style="float: right" onerror="ImgError(this);" />
                        <img src="http://twitpic.com/show/mini/@Model.TwitPicGuid8" style="float: left" onerror="ImgError(this);" />
                        <img src="http://twitpic.com/show/mini/@Model.TwitPicGuid9" style="float: right" onerror="ImgError(this);" />
                    </div>
                </div>
            </a>


            <!-- 1st Category - 100wx60h pixel--> 
            <a href="/@Model.Category2.HomePageName" style="position: absolute; top: 280px; left: 210px;">
                <div class="Tile_1stOr2ndCategory" >
                    <div class="front">
                            <h3>@Model.Category2.HomePageName</h3>
                    </div>
                    <div class="GeneircImageBackTile" 
                         style="background-image: url(@Url.Content("~/Content/Home/CategoryImages/")@Model.Category2.HomePageImage)"
                    ></div>
                </div>
            </a>

            <!-- 2nd Category - 100wx60h pixel--> 
            <a href="/@Model.Category0.HomePageName" style="position: absolute; top: 350px; left: 210px;">
                <div class="Tile_1stOr2ndCategory" >
                    <div class="front">
                            <h3>@Model.Category0.HomePageName</h3>

                    </div>
                    <div class="GeneircImageBackTile" 
                         style="background-image: url(@Url.Content("~/Content/Home/CategoryImages/")@Model.Category0.HomePageImage)"
                    ></div>
                </div>
            </a>

            <!-- 3rd Category - 80wx60h pixel--> 
            <a href="/@Model.Category1.HomePageName" style="position: absolute; top: 280px; left: 320px;">
                <div class="Tile_3rdOr4thCategory" >
                    <div class="front">
                            <h3>@Model.Category1.HomePageName</h3>
                    </div>
                    <div class="GeneircImageBackTile" 
                         style="background-image: url(@Url.Content("~/Content/Home/CategoryImages/")@Model.Category1.HomePageImage)"
                    ></div>
                </div>
            </a>

            <!-- 4th Category - 80wx60h pixel--> 
            <a href="/@Model.Category3.HomePageName" style="position: absolute; top: 350px; left: 320px;">
                <div class="Tile_3rdOr4thCategory" >
                    <div class="front">
                            <h3>@Model.Category3.HomePageName</h3>
                    </div>
                    <div class="GeneircImageBackTile" 
                         style="background-image: url(@Url.Content("~/Content/Home/CategoryImages/")@Model.Category3.HomePageImage)"
                    ></div>
                </div>
            </a>

            
            <!-- Top Article - 600pixel --> 
            <a href="http://Twitter.com/@Model.User.TwitterUsername" style="position: absolute; top: 250px; left: 0px;">
                <div class="Tile_Tweet" >
                    <div class="front">
                            <h3>Follow me on Twitter @@@Model.User.TwitterUsername</h3>
                    </div>
                    <div class="back">
                        <h3>
                            @Model.LatestTweet
                        </h3>
                    </div>
                </div>
            </a>
        </div>
    </div>

    @Html.Partial("SharedSidebar", @ViewData["SidebarModel"])
</body>
</html>
